<template>
  <view>

   <u-navbar
      :is-back="true"
      :custom-back="BackM"
      title="铺货网点"
      back-text=""
    >
    </u-navbar>
    <view style="background-color: #f4f5f7">
      <view style="padding: 0.3rem; text-align: center">-商品网点-</view>
    </view>

    <view class="inputS">
      <u-form :model="form" ref="uForm">
        <u-form-item
          style="padding: 0.7rem 1rem"
          prop="name"
          label-width="auto"
          label="网点名称"
          ><u-input v-model="form.name"
          placeholder="请填写铺货网点名称"
        /></u-form-item>

        <u-form-item
          style="padding: 0.7rem 1rem"
          prop="intro"
          label-width="auto"
          label="网点电话"
          ><u-input v-model="form.phone"
           placeholder="请填写铺货网点电话"
        /></u-form-item>

        <u-form-item
          style="padding: 0.7rem 1rem"
          prop="sex"
          :disabled='true'
          label-width="auto"
          label="网点位置"
          >
              <view slot="right" >
                <view>
                  <image @click="goMap"  style="width: 0.6rem;padding: 0rem 0.5rem;
height: 1rem;" src="../../style/image/myPos/map.png" alt="">
                </view>
            </view>
          <u-input v-model="form.address"
          :disabled='true'
          placeholder="点击右图标选择铺货网点地址"
        /></u-form-item>

        <u-form-item
          style="padding: 0.7rem 1rem"
          prop="coordinate"
          label-width="auto"
          label="网点经纬度"
          >
          <u-input v-model="form.coordinate"
          :disabled='true'
          placeholder="选择地点自动获取经纬度"
        /></u-form-item>
        <u-form-item
          style="padding: 0.7rem 1rem"
          prop="trade"
          :disabled='true'
          label-width="auto"
          label="网点行业"
          @click="hangM"
          >
          <view slot="right" >
                <view style="display: flex;align-items: center;">
                  <image @click="selectShowM"  style="width: 0.4rem;padding: 0.5rem;
height: 0.8rem;" src="../../style/image/cargo/back.png" alt="">
                </view>
            </view>
          <u-input v-model="form.trade"
           :disabled='true'
          placeholder="点击右箭头选择铺货网点地址"
        /></u-form-item>
           <u-form-item
          style="padding: 0.7rem 1rem"
          prop="sex"
          label-width="auto"
          label="营业时间"
          >
            <view slot="right" >
                <view style="display: flex;align-items: center;">
                  <image @click="ShowM"  style="width: 0.4rem;padding: 0.5rem;
height: 0.8rem;" src="../../style/image/cargo/back.png" alt="">
                </view>
            </view>
          <u-input v-model="form.time"
           :disabled='true'
          placeholder="点击右箭头选择营业时间"
        />
          </u-form-item> 
      </u-form>
    </view>

    <!-- <u-calendar v-model="show" :mode="mode"  @change="change"></u-calendar> -->

      <u-select v-model="show"  mode="mutil-column" :list="timeList" @confirm="change"></u-select>

    <u-select mode="mutil-column-auto"  @confirm="confirmM" value-name='id'  label-name='name' child-name='level2'  v-model="selectShow" :list="selectList"></u-select>

    <view class="footP">
      <view
        @click="nextM"
        style="padding: 0.7rem; display: flex; align-items: center"
      >
        <!-- <image style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
        <view style="color: white; margin-left: 0.2rem">提交</view>
      </view>
    </view>
    
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import { saveShopBranch, findBranchSite } from "../../utils/uniApi";

import { AppModule } from "../../store/modules/app";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public mode = "range";

  public form = {
    name: "",
    phone: "",
    address: "",
    coordinate: "",
    trade: "",
    time: "",
  };
  public shopId=''  //商户id
  public submitAddress = "";
  public provinceName = "";
  public cityName = "";
  public districtName = "";
  public rules = {
    name: [
      {
        required: true,
        message: "请输入姓名",
        // 可以单个或者同时写两个触发验证方式
        trigger: ["change", "blur"],
      },
    ],
    intro: [
      {
        // min: 5,
        message: "简介不能少于5个字",
        // trigger: 'change'
      },
    ],
  };

   public timeList = [
    [
      {
        value: "1",
        label: "1:00",
      },
      {
        value: "2",
        label: "1:30",
      },
      {
        value: "3",
        label: "2:30",
      },
      {
        value: "4",
        label: "3:30",
      },
      {
        value: "5",
        label: "4:30",
      },
      {
        value: "6",
        label: "5:30",
      },
      {
        value: "7",
        label: "6:00",
      },
      {
        value: "8",
        label: "6:30",
      },
      {
        value: "9",
        label: "7:00",
      },
      {
        value: "10",
        label: "7:30",
      },
      {
        value: "11",
        label: "8:00",
      },
      {
        value: "12",
        label: "8:30",
      },
      {
        value: "13",
        label: "9:00",
      },
      {
        value: "14",
        label: "9:30",
      },
        {
        value: "15",
        label: "9:30",
      },
          {
        value: "16",
        label: "10:00",
      },
          {
        value: "17",
        label: "10:30",
      },
       {
        value: "18",
        label: "11:00",
      },
      {
        value: "19",
        label: "11:30",
      },
      {
        value: "20",
        label: "12:00",
      },
    ],
    [
      {
        value: "21",
        label: "13:00",
      },
      {
        value: "22",
        label: "13:30",
      },
      {
        value: "23",
        label: "14:00",
      },
      {
        value: "24",
        label: "14:30",
      },
      {
        value: "25",
        label: "15:00",
      },
      {
        value: "26",
        label: "15:30",
      },
      {
        value: "27",
        label: "16:00",
      },
      {
        value: "28",
        label: "16:30",
      },
      {
        value: "29",
        label: "17:00",
      },
      {
        value: "30",
        label: "17:30",
      },
      {
        value: "31",
        label: "18:00",
      },
      {
        value: "32",
        label: "18:30",
      },
      {
        value: "33",
        label: "19:00",
      },
       {
        value: "34",
        label: "19:30",
      },
        {
        value: "35",
        label: "20:00",
      },
        {
        value: "36",
        label: "20:30",
      },
        {
        value: "37",
        label: "21:00",
      },
        {
        value: "38",
        label: "21:30",
      },
      {
        value: "39",
        label: "22:00",
      },
      {
        value: "40",
        label: "22:30",
      },
       {
        value: "41",
        label: "23:00",
      },
       {
        value: "42",
        label: "23:30",
      },
       {
        value: "43",
        label: "24:00",
      },
      
    ],
  ];

  public workingStartTime = ""; //营业开始时间
  public workingEndTime = ""; //营业结束时间

  public show = false;
  public selectShow = false;
  public tradeId = ""; //行业id
  public selectList = [
    {
      value: 1,
      label: "中国",
      children: [
        {
          value: 2,
          label: "广东",
        },
        {
          value: 5,
          label: "广西",
        },
      ],
    },
    {
      value: 8,
      label: "美国",
      children: [
        {
          value: 9,
          label: "纽约",
          children: [
            {
              value: 10,
              label: "皇后街区",
            },
          ],
        },
      ],
    },
  ];

  onReady() {
    // this.$refs.uForm.setRules(this.rules);

    (this.$refs["uForm"] as any).setRules(this.rules);
    console.log(123);
  }
  created() {
    // this.$refs.uForm.setRules(this.rules);
  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
    //this.$refs.uForm.setRules(this.rules);
    this.shopId=AppModule.router_pos
    console.log( this.shopId,' this.shopId')

    findBranchSite().then((res: any) => {
      console.log("网点类型", res);
      this.selectList = res.data.data;
      uni.hideLoading();
    });
  }
  hangM() {
    console.log(123);
  }

  BackM() {

    // uni.navigateBack({
    //   delta: 2,
    // });
    uni.navigateTo({
                 url: "../cargo/selectW",
                });

  }

  confirmM(data: any) {
    (this.form as any).trade = data[1].label;
    this.tradeId = data[1].value;

    console.log(data, "confirmM");
  }

  selectShowM() {
    this.selectShow = !this.selectShow;
  }

  ShowM() {
    this.show = !this.show;
  }

  nextM() {
    //  uni.navigateTo({
    //     url: '../../pages/item/modify/set',
    //   });

    let params = {
      // userId: uni.getStorageSync("userId") == ""
      //     ? ""
      //     : parseInt(uni.getStorageSync("userId")),
      shopId:this.shopId,
      id: "", //网点ID(新增无ID,编辑有ID)
      branchName: this.form.name, //	网点名称
      contactsName: "", //	联系人名字
      contactsPhone: this.form.phone, //	联系人手机号
      // provinceCode			省
      // cityCode				市
      // districtCode			区
      provinceName: this.provinceName, //	省
      cityName: this.cityName, //市
      districtName: this.districtName, //	区
      address: this.submitAddress, //	网点地址
      siteId: this.tradeId, //所属行业ID
      siteName: this.form.trade, //	所属行业名称
      coordinate: this.form.coordinate, //地址经纬度
      workingStartTime: this.workingStartTime, //		营业开始时间
      workingEndTime: this.workingEndTime, //营业结束时间
      del: "", //		是否删除（删除操作传入 1 删除）
    };


    console.log("params", params);

    saveShopBranch(params).then((res:any)=>{

        console.log(res,"返回结果")

        	uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					});

          if(res.data.message=='操作成功'){
          
            uni.navigateTo({
                 url: "../cargo/selectW",
                });
          }
    })
  }
  goMap() {
    console.log(123);
    uni.chooseLocation({
      success: (data) => {
        console.log(data);

        this.form.address = data.address;

        this.submitAddress = "湖北省武汉市江汉区新华下路245号";

        var reg = /.+?(省|市|自治区|自治州|县|区)/g;
        this.submitAddress = data.address;
        //  data.address.split('省')[0]+
        //  data.address.split('市')[0]
        //  +data.address.split('区')[0]
        //  this.submitAddress=this.submitAddress.match(reg)[0]+this.submitAddress.match(reg)[1]+this.submitAddress.match(reg)[2]
        this.provinceName = (this.submitAddress as any).match(reg)[0]; //	省
        this.cityName = (this.submitAddress as any).match(reg)[1]; //	市
        this.districtName = (this.submitAddress as any).match(reg)[2]; // 区
        console.log(this.submitAddress, "this.submitAddress");

        this.form.coordinate = data.longitude + "," + data.latitude;

        // this.addressData.addressName = data.name;
        // this.addressData.address = data.name;
      },
    });
    //   uni.navigateTo({
    //  url: '../map/index'
    //     });
  }
  change(e: any) {
    console.log(e);

    this.form.time = e[0].label + "至" + e[1].label;
    this.workingStartTime =  e[0].label ;
    this.workingEndTime =  e[1].label ;
  }
}
</script>

<style  lang="scss"  scoped>
/deep/.uni-input-input {
  display: block;
  height: 100%;
  background: none;
  color: inherit;
  opacity: 1;
  -webkit-text-fill-color: currentcolor;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-indent: inherit;
  text-transform: inherit;
  text-shadow: inherit;
  //  color: red;
  padding-left: 1rem;
}

.footP {
  position: absolute;
  bottom: 0;
  background-color: #02af74;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>